<template>
    <el-form :model="form">
        <el-form-item :label-width="formLabelWidth">
            <el-upload
                    action=""
                    list-type="picture-card"
                    :before-upload="handleBeforeUpload"
                    :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </el-form-item>
    </el-form>
</template>

<script>
    import {upload_img} from "@/api/upload"

    export default {
        name: "upload-image",
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                formLabelWidth: '10px',
                limitNum: 3,
                form: {},

            }
        },
        methods: {
            // 上传文件之前的钩子
            handleBeforeUpload(file) {
                console.log('before');
                if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
                    this.$notify.warning({
                        title: '警告',
                        message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
                    })
                }
                let size = file.size / 1024 / 1024 / 2;
                if (size > 2) {
                    this.$notify.warning({
                        title: '警告',
                        message: '图片大小必须小于2M'
                    })
                }
                upload_img(file).then(res => {
                    if (res.status === 200) {
                        console.log(res)
                    }
                })


            },
            handleRemove(file, fileList) {
                if (fileList.size > 0) {
                    this.dialogVisible = true;
                }
            },


        }
    }
</script>

<style scoped>

</style>
